<template>
    <div class="horizontal-scroll-container">
        <div class="scroll-wrapper" ref="scrollWrapper">
            <div class="image-list" ref="imageList" :style="{ transform: `translateX(-${currentIndex * (itemWidth+10)}px)` }">
                <div
                        class="image-item"
                        v-for="(image, index) in images"
                        :key="index"
                        @click="handleClick(image)"
                >
                    <img :src="image.url" :alt="image.alt || 'image'">
                </div>
            </div>
        </div>

        <button
                class="scroll-button left"
                @click="scrollLeft"
                :disabled="currentIndex === 0"
        >
            &lt;
        </button>

        <button
                class="scroll-button right"
                @click="scrollRight"
                :disabled="currentIndex >= images.length - visibleItems"
        >
            &gt;
        </button>
    </div>
</template>

<script>
    export default {
        name: 'HorizontalScrollGallery',
        props: {
            images: {
                type: Array,
                required: true,
                validator: value => value.every(item => item.url)
            }
        },
        data() {
            return {
                currentIndex: 0,
                visibleItems: 2,
                itemWidth: 228, // (466 - 10) / 2 = 228
                gap: 10
            }
        },
        watch:{
            images() {
                // 当图片数组变化时，重置当前索引为0
                this.currentIndex = 0;
            }
        },
        methods: {
            scrollLeft() {
                if (this.currentIndex > 0) {
                    this.currentIndex--;
                }
            },
            scrollRight() {
                if (this.currentIndex < this.images.length - this.visibleItems) {
                    this.currentIndex++;
                }
            },
            handleClick(image) {
                this.$emit('image-click', image);
            }
        }
    }
</script>

<style scoped>
    .horizontal-scroll-container {
        position: relative;
        width: 466px;
        height: 128px;
        overflow: hidden;
    }

    .scroll-wrapper {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .image-list {
        display: flex;
        height: 100%;
        transition: transform 0.3s ease;
    }

    .image-item {
        flex: 0 0 calc(50% - 5px); /* 每张图片宽度为容器一半减去一半间距 */
        height: 100%;
        margin-right: 10px;
        cursor: pointer;
    }

    .image-item:last-child {
        margin-right: 0;
    }

    .image-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 4px;
    }

    .scroll-button {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 30px;
        height: 30px;
        background: rgba(0, 0, 0, 0.5);
        color: white;
        border: none;
        border-radius: 50%;
        cursor: pointer;
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10;
    }

    .scroll-button:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .scroll-button.left {
        left: 10px;
    }

    .scroll-button.right {
        right: 10px;
    }
</style>